// 黑色主题
$primary: #0a78d5;
@keyframes push-in {
  0% {
     transform: scale(1.15);
     opacity: 0;
  }
  100% {
     transform: scale(1);
     opacity: 1;
  }
}
@keyframes push-out {
  0% {
     transform: scale(1);
     opacity: 1;
  }
  100% {
     transform: scale(1.15);
     opacity: 0;
  }
}
.dark {
  // 【字体】
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: 400;
  // 【标题栏】
  .header {
    background-color: #1a2225;
    box-shadow: 0 1px 5px rgba(70, 70, 70, 0.6);
  }
  .collapse-btn {
    width: 48px;
    padding: 0 14px;
    background-color: #2a373b;
  }
  .header .logo {
    font-weight: normal;
    margin-left: 16px;
  }
  .search-icon {
    margin: 0 12px;
  }
  .avator-con {
    margin-left: calc(40px - 12px);
    margin-top: 2px;
  }
  .avator {
    width: 28px;
    height: 28px;
  }
  .header-right {
    padding-right: 28px;
  }
  // 【面包屑】
  .crumb-wrapper {
    position: absolute;
    top: 50px;
    left: 208px;
    z-index: 1;
    right: 0;
    background-color: white;
    padding: 10px;
    height: 48px;
    transition: left .3s ease-in-out;
    .el-breadcrumb {
      margin-top: 7px;
      margin-bottom: 0;
      margin-left: 14px;
    }
  }
  // 【侧边栏】
  .g-menu-texture {
    background-image: none;
  }
  .sidebar {
    border-right: 1px solid #d9d9d9;
    .el-menu-item, .el-submenu__title {
      padding-left: 16px;
      padding-right: 8px;
    }
    .el-menu-item [class^=el-icon-] {
      margin-right: 8px;
    }
    .sidebar-el-menu:not(.el-menu--collapse) {
      width: 208px;
    }
    .el-menu-item, .el-submenu__title {
      height: 40px;
      line-height: 40px;
      i {
        color: #595959;
        font-size: 14px;
        margin-right: 8px;
      }
      span {
        color: #262626;
      }
      &.is-active {
        color: $primary;
        background-color: rgba(10, 122, 213, 0.1);
        border-right: 3px solid $primary;
        i, span {
          color: $primary;
        }
      }
      &:focus, &:hover {
        background-color: rgba(10, 122, 213, 0.1);
        color: $primary;
        i, span {
          color: $primary;
        }
      }
    }
    .submenu {
      &.el-menu-item, .el-submenu__title {
        height: 36px;
        line-height: 30px;
        &::before {
          content: "\B7";
          margin-right: 8px;
          font-weight: bolder;
          font-size: 20px;
          position: relative;
          top: 3px;
        }
      }
    }
    .el-submenu__title {
      .el-submenu__icon-arrow {
        margin-top: -4px;
        right: 0;
        &::before {
          content: "\e78f";
        }
      }
    }
    .el-menu--collapse {
      width: 48px;
      .el-menu-item {
        padding: 0 10px;
      }
      .el-submenu__title {
        padding: 0 10px !important;
      }
      .el-menu-item [class^=el-icon-] {
        margin: 0;
      }
      .el-submenu__title {
        text-align: center;
      }
      .el-tooltip {
        padding: 0 !important;
        text-align: center;
      }
    }
  }
  // 【内容区域】
  .content-box {
    top: 100px;
    background-color: #f3f3f3;
    left: 208px;
    .content {
      padding: 14px;
    }
  }
  .content-collapse {
    left: 48px;
  }

  // 【组件库】
  $success: #19be6b;
  $warn: #fdb81e;
  $danger: #cc3a21;

  $primary-hover: #40a9ff;
  $warn-hover: #f9c642;
  $danger-hover: #de5c45;

  $primary-active: #096dd9;
  $warn-active: #e7a209;
  $danger-active: #992e1c;

  $primary-disabled: #ffd5d5;
  $success-disabled: #c4ffe1;
  $danger-disabled: #ffd6cc;
  $warn-disabled: #ffd79a;

  $btn-radius: 0;
  $box-radius: 4px;
  $input-back: #f5f8fb;
  $shadow: 0 5px 8px 0 rgba(35, 45, 65, .28);
  $box-shadow: 0 4px 8px 0 rgba(36, 46, 66, .06);
  $hover-shadow: 0 6px 16px 0 rgba(33, 43, 54, 0.2);

  // button
  .el-button {
    background-color: white;
    border-color: #dcdee2;
    transition: 0.3s ease;
    border-radius: $btn-radius;

    &:hover {
      transition: 0.3s ease;
    }
    &:hover, &:focus {
      color: $primary-hover;
      border-color: $primary-hover;
    }
    &:active {
      color: $primary-active;
      border-color: $primary-active;
    }

    &.is-disabled {
      background-color: #f5f5f5;
      border-color: #d9d9d9;
      color: #d9d9d9;
    }
    &.el-button.el-button--text {
      color: $primary;
      background-color: transparent;
      border: none;
      box-shadow: none;
      &:hover, &:focus {
        color: $primary-hover;
      }
      &:active {
        color: $primary-active;
      }
      &.is-disabled {
        color: #d9d9d9;
      }
    }

    &.el-button--primary {
      background-color: $primary;
      border: 1px solid $primary;
      color: white;

      &:hover, &:focus {
        background: $primary-hover;
        border-color: $primary-hover;
      }
      &:active {
        background: $primary-active;
        border-color: $primary-active;
      }
      &.is-disabled {
        background-color: #f5f5f5;
        border-color: #d9d9d9;
        color: #d9d9d9;
      }
      &.is-plain {
        color: $primary;
        background-color: $primary-disabled;
      }
    }

    &.el-button--success {
      background-color: $success;
      border: 1px solid $success;
      color: white;

      &.is-disabled {
        background-color: #f5f5f5;
        border-color: #d9d9d9;
        color: #d9d9d9;
      }
      &.is-plain {
        color: $success;
        background-color: $success-disabled;
      }
    }

    &.el-button--warning {
      background-color: $warn;
      border: 1px solid $warn;
      color: white;
      &:hover, &:focus {
        background: $warn-hover;
        border-color: $warn-hover;
      }
      &:active {
        background: $warn-active;
        border-color: $warn-active;
      }
      &.is-disabled {
        background-color: #f5f5f5;
        border-color: #d9d9d9;
        color: #d9d9d9;
      }
      &.is-plain {
        color: $warn;
        background-color: $warn-disabled;
      }
    }

    &.el-button--info {
      background-color: #909399;
      border: 1px solid #909399;
      color: white;
      &.is-disabled {
        background-color: #f5f5f5;
        border-color: #d9d9d9;
        color: #d9d9d9;
      }
      &.is-plain {
        color: #909399;
        background-color: #d2d7e0;
      }
    }

    &.el-button--danger {
      background-color: $danger;
      border: 1px solid $danger;
      color: white;
      &:hover, &:focus {
        background: $danger-hover;
        border-color: $danger-hover;
      }
      &:active {
        background: $danger-active;
        border-color: $danger-active;
      }
      &.is-disabled {
        background-color: #f5f5f5;
        border-color: #d9d9d9;
        color: #d9d9d9;
      }
      &.is-plain {
        color: $danger;
        background-color: $danger-disabled;
      }
    }
  }

  .el-button.is-plain:focus,
  .el-button.is-plain:hover {
    color: $primary;
    border-color: $primary;
  }

  // button group
  .el-input-group--append .el-input__inner,
  .el-input-group__prepend {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .el-input-group {

    .el-input-group--prepend .el-input__inner,
    .el-input-group__append {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  // tabs
  .el-tabs__active-bar {
    background-color: $primary;
  }

  .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
    color: $primary;
  }

  .el-tabs--border-card>.el-tabs__header .el-tabs__item:not(.is-disabled):hover {
    color: $primary;
  }

  // pageination
  .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: $primary;
    color: white;
  }

  .el-pagination__sizes .el-input .el-input__inner:hover {
    border-color: $primary;
  }

  .el-pagination.is-background .el-pager li:not(.disabled):hover {
    color: $primary;

    &.active {
      color: white;
    }
  }

  .el-pager li {
    &.active {
      color: $primary;
    }

    &:hover {
      color: $primary;
    }
  }

  // input
  .el-input__inner,
  .el-textarea__inner {
    border-radius: $btn-radius;

    &:focus {
      border: 1px solid $primary;
    }
  }

  .el-textarea__inner {
    border-radius: $box-radius;
  }

  .el-select .el-input__inner {
    border-radius: $btn-radius;
  }

  // input-group
  .el-input-group__prepend,
  .el-input-group__append {
    border-radius: $btn-radius;
  }

  // link
  .el-link.el-link--primary {
    color: $primary;
  }

  .link-type:hover,
  .link-type:focus:hover {
    color: $primary;
  }

  .el-link.el-link--default:after,
  .el-link.el-link--primary.is-underline:hover:after,
  .el-link.el-link--primary:after {
    border-color: $primary;
  }

  // select
  .el-select .el-input.is-focus .el-input__inner {
    border-color: $primary;
  }

  // dialog 
  .dialog-fade-enter-active {
    animation: push-in 0.3s
  }

  .dialog-fade-leave-active {
    animation: push-out 0.3s
  }

  // radio
  .el-radio__input.is-checked .el-radio__inner {
    background-color: $primary;
    border-color: $primary;
  }

  .el-radio__input.is-checked+.el-radio__label {
    color: $primary;
  }

  .el-radio.is-bordered.is-checked {
    border-color: $primary;
  }

  .el-radio__inner:hover {
    border-color: $primary;
  }

  // radio button
  .el-radio-button__orig-radio:checked+.el-radio-button__inner {
    background-color: $primary;
    border-color: $primary;
    box-shadow: none;

    &:hover {
      color: white;
    }
  }

  .el-radio-button__inner:hover {
    color: $primary;
  }

  // checkbox
  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: $primary;
    border-color: $primary;
  }

  .el-checkbox__input.is-checked+.el-checkbox__label {
    color: $primary;
  }

  .el-checkbox__inner:hover {
    border-color: $primary;
  }

  .el-checkbox.is-bordered.is-checked {
    border-color: $primary;
  }

  // checkbox button
  .el-checkbox-button.is-checked .el-checkbox-button__inner {
    background-color: $primary;
    border-color: $primary;
    box-shadow: none;

    &:hover {
      color: white;
    }
  }

  .el-checkbox-button__inner:hover {
    color: $primary;
  }

  .el-checkbox-button.is-focus .el-checkbox-button__inner {
    border-color: #DCDFE6;
  }

  .el-checkbox.is-bordered.is-checked {
    border-color: $primary;
  }

  // card
  .el-card.is-always-shadow,
  .el-card.is-hover-shadow:focus {
    border-radius: $box-radius;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .1);

    .el-card__header {
      font-weight: bolder;
      padding: 14px 20px;
      border-bottom: 1px solid #e8eaec;
    }
  }

  // link
  .el-link.el-link--primary {
    color: $primary;
  }

  // date
  .el-range-editor.is-active,
  .el-range-editor.is-active:hover {
    border-color: $primary;
  }

  // backtop
  .el-backtop,
  .el-calendar-table td.is-today {
    color: $primary;
  }

  // switch
  .el-switch.is-checked .el-switch__core {
    border-color: $primary;
    background-color: $primary;
  }

  .el-switch__label.is-active {
    color: $primary;
  }

  // badge
  .el-badge__content--primary {
    background-color: $primary;
  }

  // loading
  .el-loading-spinner .path {
    stroke: $primary;
  }

  // 【模板库】
  .g-title-con {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .ant-affix {
    .g-title-con {
      transform: translateY(-10px);
    }
  }
  .g-main-title {
    line-height: 28px;
  }
  .el-button.el-popover__reference.el-button--text {
    background-color: white;
    border: 1px solid #dcdee2;
    color: #555555;
    transition: 0.3s ease;
    border-radius: $btn-radius;
    height: 32px;
    padding: 0 10px;
    &:focus, &:hover {
      color: #40a9ff;
      border-color: #40a9ff;
    }
    &:active {
      color: #096dd9;
      border-color: #096dd9;

    }
  }
  .g-dialog .el-dialog {
    border-top-color: $primary;
  }

  // 【公共组件】
  .title-banner .title {
    background-image: url("./img/bg-banner-dark.jpg");
  }
}
@media (max-width: 768px) {
  .inspur-design {
    .toolbar {
      right: 84px;
    }
  }
}